import React, { useState, useEffect } from 'react';
import { Github, Mail, MapPin, Code, Coffee, Heart } from 'lucide-react';
import SEOHead from '../components/SEOHead';

const About = () => {
  const skills = [
    'JavaScript', 'TypeScript', 'React', 'Vue.js', 'Node.js', 
    'Python', 'Java', 'Docker', 'AWS', 'MongoDB'
  ];

  const experiences = [
    {
      title: '高级前端工程师',
      company: '科技公司',
      period: '2022 - 至今',
      description: '负责前端架构设计和团队技术管理'
    },
    {
      title: '前端工程师',
      company: '互联网公司',
      period: '2020 - 2022',
      description: '参与多个大型项目的前端开发工作'
    }
  ];

  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    setIsVisible(true);
  }, []);

  return (
    <>
      <SEOHead 
        title="关于我"
        description="了解技术博主的个人简介、技能专长、工作经历和联系方式。一名热爱技术的全栈开发者，专注于创造优雅的用户体验和高质量的代码。"
        keywords="关于我,个人简介,技术博主,全栈开发者,前端工程师,技能专长,工作经历"
      />
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      {/* Header */}
      <header className="text-center mb-16">
        <div className={`w-32 h-32 mx-auto mb-6 rounded-full overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 hover-scale animate-float ${isVisible ? 'animate-scale-in' : 'opacity-0'}`}>
          <img
            src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=300&fit=crop&crop=face"
            alt="个人头像"
            className="w-full h-full object-cover"
          />
        </div>
        <h1 className={`text-4xl font-bold text-gray-900 dark:text-white mb-4 ${isVisible ? 'animate-fade-in-up animate-delay-200' : 'opacity-0'}`}>
          关于我
        </h1>
        <p className={`text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto ${isVisible ? 'animate-fade-in-up animate-delay-300' : 'opacity-0'}`}>
          一名热爱技术的全栈开发者，专注于创造优雅的用户体验和高质量的代码
        </p>
      </header>

      {/* Introduction */}
      <section className="mb-16" itemScope itemType="https://schema.org/Person">
        <div className={`bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 card-animated ${isVisible ? 'animate-fade-in-left animate-delay-500' : 'opacity-0'}`}>
          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6 flex items-center">
            <Heart className="h-6 w-6 mr-3" style={{ color: 'var(--color-primary)' }} />
            个人简介
          </h2>
          
          <meta itemProp="name" content="技术博主" />
          <meta itemProp="jobTitle" content="全栈开发者" />
          <meta itemProp="description" content="一名热爱技术的全栈开发者，专注于创造优雅的用户体验和高质量的代码" />
          <div className="prose prose-lg max-w-none text-gray-600 dark:text-gray-300">
            <p>
              你好！我是一名充满激情的软件开发者，拥有超过5年的前端开发经验。
              我热爱编程，享受解决复杂问题的过程，并且始终保持对新技术的好奇心。
            </p>
            <p>
              在工作中，我专注于创建用户友好的界面和高性能的应用程序。
              我相信好的代码不仅要功能完善，还要易于维护和扩展。
            </p>
            <p>
              除了编程，我还喜欢阅读技术书籍、参与开源项目，以及在这个博客上分享我的学习心得和项目经验。
            </p>
          </div>
        </div>
      </section>

      {/* Skills */}
      <section className="mb-16">
        <div className={`bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 card-animated ${isVisible ? 'animate-fade-in-right animate-delay-200' : 'opacity-0'}`}>
          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6 flex items-center">
            <Code className="h-6 w-6 mr-3" style={{ color: 'var(--color-primary)' }} />
            技能专长
          </h2>
          <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
            {skills.map((skill, index) => (
              <div
                key={index}
                className="px-3 py-2 rounded-lg text-center text-sm font-medium transition-all duration-300 hover:scale-105 hover:shadow-md animate-fade-in-up opacity-0"
                style={{
                  backgroundColor: 'var(--color-primary-light)',
                  color: 'var(--color-primary-dark)',
                  animationDelay: `${0.8 + index * 0.05}s`,
                  animationFillMode: 'forwards'
                }}
              >
                {skill}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Experience */}
      <section className="mb-16">
        <div className={`bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 card-animated ${isVisible ? 'animate-fade-in-left animate-delay-300' : 'opacity-0'}`}>
          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6 flex items-center">
            <Coffee className="h-6 w-6 mr-3" style={{ color: 'var(--color-primary)' }} />
            工作经历
          </h2>
          <div className="space-y-6">
            {experiences.map((exp, index) => (
              <div 
                key={index} 
                className={`border-l-4 pl-6 hover:bg-gray-50 dark:hover:bg-gray-700 p-4 rounded-r-lg transition-all duration-300 animate-fade-in-right opacity-0`}
                style={{ 
                  borderLeftColor: 'var(--color-primary)',
                  animationDelay: `${1.2 + index * 0.1}s`,
                  animationFillMode: 'forwards'
                }}
              >
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  {exp.title}
                </h3>
                <div 
                  className="font-medium mb-2"
                  style={{ color: 'var(--color-primary)' }}
                >
                  {exp.company} • {exp.period}
                </div>
                <p className="text-gray-600 dark:text-gray-300">
                  {exp.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact */}
      <section>
        <div className={`bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 card-animated ${isVisible ? 'animate-fade-in-up animate-delay-500' : 'opacity-0'}`}>
          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
            联系方式
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <a
              href="mailto:your.email@example.com"
              className="flex items-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 card-animated group animate-fade-in-up opacity-0"
              style={{ 
                animationDelay: '1.5s',
                animationFillMode: 'forwards'
              }}
            >
              <Mail 
                className="h-6 w-6 mr-3 icon-bounce" 
                style={{ color: 'var(--color-primary)' }}
              />
              <div>
                <div className="font-medium text-gray-900 dark:text-white">邮箱</div>
                <div className="text-sm text-gray-600 dark:text-gray-300">your.email@example.com</div>
              </div>
            </a>
            
            <a
              href="https://github.com/yourusername"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 card-animated group animate-fade-in-up opacity-0"
              style={{ 
                animationDelay: '1.6s',
                animationFillMode: 'forwards'
              }}
            >
              <Github 
                className="h-6 w-6 mr-3 icon-spin" 
                style={{ color: 'var(--color-primary)' }}
              />
              <div>
                <div className="font-medium text-gray-900 dark:text-white">GitHub</div>
                <div className="text-sm text-gray-600 dark:text-gray-300">@yourusername</div>
              </div>
            </a>
            
            <div className="flex items-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg animate-fade-in-up opacity-0"
              style={{ 
                animationDelay: '1.7s',
                animationFillMode: 'forwards'
              }}
            >
              <MapPin 
                className="h-6 w-6 mr-3 animate-pulse" 
                style={{ color: 'var(--color-primary)' }}
              />
              <div>
                <div className="font-medium text-gray-900 dark:text-white">位置</div>
                <div className="text-sm text-gray-600 dark:text-gray-300">中国，上海</div>
              </div>
            </div>
          </div>
        </div>
      </section>
      </div>
    </>
  );
};

export default About;
